﻿<%@ Page Language="VB" MasterPageFile="~/FSE_Master_Page.master" AutoEventWireup="false" CodeFile="template.aspx.vb" Inherits="template" title="FSE | Template" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>


<asp:Content ID="Content1" ContentPlaceHolderID="Body" runat="server">


<script type="text/javascript">

    function changeSrc(myid, myimg) {
        $(myid).attr('src', myimg);
    };
    $(document).ready(function() {
        var catwidth = document.getElementById('catbarcon').offsetWidth;
        $('#catbar').css('width', catwidth - 2);
    });

    $(window).resize(function() {
        $('#catbar').css('width', catwidth - 2);
    });






    $(function() {
        $('#fav_collapsed').click(function() {
            $('#a_collapsed').css('display', 'none');
            $('#fav_collapsed').animate({
                height: '0'
            }, 100, function() {
                $('#a_expanded').fadeIn('fast');
                $('#fav_expanded').animate({
                    bottom: '-26'
                }
                , 100);
            });
        });
        $('#fav_expanded').click(function() {
            $('#a_expanded').css('display', 'none');
            $('#fav_expanded').animate({
                bottom: '0'
            }, 100, function() {
                $('#a_collapsed').fadeIn('fast');
                $('#fav_collapsed').animate({
                    height: '24'
                }
                , 100);
            });
        });
        $('#dep_img').click(function() {
            var h = $('#<%=dep_ddb.clientid %>').height();
            if (h === 0) {
                $('.dep_ddb_class').css('display', 'block');
                $('.dep_ddb_class').animate({
                    height: '500'
                }, 200);
            } else if (h != 0) {
                listbox_hide();
                //$('#<%=dep_ddb.clientid %>').stop();
                //$('#<%=dep_ddb.clientid %>').hide();
                //$('#<%=dep_ddb.clientid %>').css('height', '0');
            };
        });
    });

    $(document).click(function(e) {
        var imgbox = $('#dep_img');
        var listbox = $('.dep_ddb_class');
        var container = $('#dep_ddb_div');
        //if(e.target.id === 'dep_img'){alert('true')};
        if ((e.target.id === 'dep_img' || container.has(e.target).length === 0) && listbox.height() > 0) {
            listbox_hide();
            //listbox.hide();
            //listbox.css('height', '0');
        }
    });

    function listbox_hide() {
        var listbox = $('.dep_ddb_class');
        var filterID = '#<%=filterButton.clientid %>';
        listbox.stop();
        listbox.hide();
        listbox.css('height', '0');
        $(filterID).focus();
        $(filterID).click();
    };


    $(function() {
        $('#<%=dep_ddb.clientid %>').change(function() { //Function to keep the dropdownlist label updated (for departments).
            var totalOptions = nodeCount('<%=dep_ddb.clientid %>', 'OPTION');
            var selected = selectedCount('<%=dep_ddb.clientid %>', totalOptions);
            var Lbl = '#<%=dep_label.clientid %>'
            var obj = document.getElementById('<%=dep_ddb.clientid %>');
            if (selected == 1) {
                var newLabelText = obj.options[obj.selectedIndex].text;
                $(Lbl).text(newLabelText);
            } else if (selected == 0) {
                $(Lbl).text('Department');
            } else {
                var newLabelText = selected + ' departments selected'
                $(Lbl).text(newLabelText);
            };
        });

        $('#<%=dep_ddb.clientid %>').keypress(function(event) {
            var key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
            if (key == 13 && event.shiftKey == false) {
                var filterID = '#<%=filterButton.clientid %>';
                var listbox = $('#<%=dep_ddb.clientid %>');
                listbox_hide();
                //listbox.hide();
                //listbox.css('height', '0');
                //$(filterID).focus();
                //$(filterID).click();
            };
        });
    });

    function nodeCount(myid, mynodename) { //Function to count the total number of nodes within an element.
        var count = 0; //Counts actual nodes
        var listbox = document.getElementById(myid);
        for (var i = 0; i < listbox.childNodes.length; i++) {
            var node = listbox.childNodes[i];
            if (node.nodeType == Node.ELEMENT_NODE && node.nodeName == mynodename) {
                count++;
            };
        };
        return count
    };

    function selectedCount(myid, totalOptions) { //Function to count the total number of selected options in a listbox.
        var count = 0; //Counts selected nodes
        var listbox = document.getElementById(myid);
        for (i = 0; i < totalOptions; i++) {
            if (listbox.options[i].selected) {
                count++;
            };
        };
        return count;
    };



    $(function() {
        $('#<%=dep_ddb.clientid %> option').dblclick(function() {
            listbox_hide();
        });
    });

    function testfade() {
        //$('#nonFav_container').slideToggle();
        $('#nonFav_container').fadeOut('fast');
    };
    function testfadeIn() {
        //$('#nonFav_container').slideDown();
        $('#nonFav_container').fadeIn('fast');
    };

    function createPost() {
        //$('#nonFav_container').animate({
        // top: '300'
        //}, 100, function() {
        //  $('#createPostDiv').fadeIn('fast');
        //});
        $('#createPostDiv').slideDown('fast');
        $('#enterInfoLabel').show();
        setTimeout(function() { $('#enterInfoLabel').fadeOut('slow') }, 4000);

    };

    function toggleCP() {
        $('#createPostDiv').slideToggle('fast');
        $('#enterInfoLabel').hide();
    };

    function reset_click() {
        $('#<%=dep_label.clientid %>').text('Department');
        $('#<%=dep_ddb.clientid %> option:selected').each(function() {
            $(this).removeAttr('selected');
        });
    };

    function pageLoad(sender, args) {
        $(function() {
            $('.resultContainer_class').click(function() {
                $(this).toggleClass('resultContainerExpanded_class');
                //$(this).find('.postDetail').css('display', 'block');
            });
            $('.resultContainerExpanded_class').click(function() {
                $(this).toggleClass('resultContainer_class');
                //$(this).find('.postDetail').find('.postDetailText').css('display', 'none');
            });
        });
        $('#fav_collapsed').corner('top', '2px');
        $('#fav_expanded').corner('bottom', '2px');
        $('#catbarcon').corner('4px');
        $('#catbar').corner('4px');
        $('.result_class').corner('4px');
        $('#createPostDiv').corner('4px');
        $('.resultContainer_class').corner('4px');
        $('#links_con').corner('4px');
        $('#toc').corner('4px');
        $('#homelink').addClass('curLink');

    };




</script>


    
<asp:SqlDataSource ID="depdb" SelectCommand="select id_department [ID], [Department] from departments" 
ConnectionString="<%$ ConnectionStrings:FSEdepartmentsConnection %>" runat="server" />


    <div class="dp" style="width:100%;height:100%;position:relative;margin-top:20px;min-width:842px;vertical-align:top;margin-bottom:auto;">
        <table id="results_con" class="t_con" style="width:100%;min-width:842px;max-width:950px;height:100%;margin:0 auto;">
            <tr style="height:100%;">
                
                <!-- TABLE OF CONTENTS / STICKY MENU CONTROL -->
                <td style="width:130px;vertical-align:top;">
                    <div id="links_con" style="background-color:#98a7b3;border:solid 2px white;z-index:1;
                        vertical-align:middle; width:106px; height:auto;margin-bottom:10px;position:relative;left:-5px;
                        text-align:center;padding:5px 2px 5px 2px;">
                        <a id="post" style="cursor:pointer;" onclick="javascript:createPost();">Create Post</a><br />
                        <a style="cursor:pointer;" href="Home.aspx">My Account</a>
                    </div>
                        
                    <div style="position:relative;left:-5px;">
                    <div id="locator" style="height:1px;width:1px;position:absolute;top:0;left:0;z-index:-1;"></div>
                    <div id="toc" style="z-index:1; text-align:center; 
                        border:solid 2px white; padding:0px 2px 5px 2px; width:106px;">
                    
                    <h3><a id="homelink" class="toc_link" href="Home.aspx">Textbooks</a></h3>
                    <h3><a id="art_supplieslink" class="toc_link" href="Art Supplies.aspx">Art Supplies</a></h3>
                    <h3><a id="softwarelink" class="toc_link" href="Software.aspx">Software</a></h3>
                    <h3><a id="hardwarelink" class="toc_link" href="Hardware.aspx">Hardware</a></h3>
                    <h3><a id="misclink" class="toc_link" href="Misc.aspx">Misc</a></h3>
                    
                    </div>
                    </div>
                </td>
                
                <!-- RESULTS DIVISION -->
                <td style="width:auto;margin:0;padding:0;">
                    
                    <!-- CATEGORY BAR -->
                    <div class="divcon" id="catbarcon" style="width:100%;">
                        <div id="catbar">
                            <table id="dropdownbox_table" class="t_con" style="height:34px;width:606px;">
                                <tr style="height:34px;">
                                    <td class="dep_cell" style="padding:10px 0 0 10px;">
                                        <div class="a">
                                            <img src="Images/dep_box.jpg" onmousedown="javascript:changeSrc('#dep_img','Images/dep_box_click.jpg');" 
                                             onmouseup="javascript:changeSrc('#dep_img','Images/dep_box_hover.jpg');" onmouseout="javascript:changeSrc('#dep_img','Images/dep_box.jpg');" onmouseover="javascript:changeSrc('#dep_img','Images/dep_box_hover.jpg');" id="dep_img" width="245px" height="24px" alt="Department selection." />
                                            <div class="b" id="dep_img_div" style="top:0;left:0;">
                                                <asp:Label runat="server" Text="Department" ID="dep_label" CssClass="dep_label_class"></asp:Label>
                                            </div>
                                            
                                            <div id="dep_ddb_div" class="b" style="height:500px;width:245px;">
                                            
                                            <asp:ListBox SelectionMode="Multiple" runat="server" BackColor="White"
                                             cssclass="dep_ddb_class" DataSourceID="depdb" DataTextField="Department" DataValueField="ID" ID="dep_ddb">
                                             </asp:ListBox>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="class_cell" style="padding:10px 0 0 10px;">
                                        <div class="a">
                                            <img src="Images/class_box.jpg" id="class_img" width="145px" height="24px" alt="Class selection." />
                                            <div class="b" style="top:0;left:0;">
                                                <asp:Label runat="server" Text="Class" ID="class_label" CssClass="class_label_class"></asp:Label>
                                            </div>
                                            
                                           
                                            
                                            <div id="class_ddb_div" class="b" style="height:500px;width:142px;">
                                            
                                            <asp:ListBox SelectionMode="Multiple" runat="server" BackColor="White"
                                             cssclass="class_ddb_class" Visible="false" DataSourceID="depdb" DataTextField="Department" ID="class_ddb">
                                             </asp:ListBox>
                                            </div>
                                            
                                        </div>
                                    </td>
                                    <td style="padding:10px 5px 0px 10px; width:200px;">
                                        <asp:Button runat="server" Width="100px" Text="Filter Results" ID="filterButton" CssClass="class_linkbutton_filter"></asp:Button>
                                        <asp:Button runat="server" Width="70px" Text="Reset" ID="clearButton" OnClientClick="javascript:reset_click();" CssClass="class_linkbutton" />
                                    </td>
                                </tr>
                            </table>
                        
                        
                            
                            <div class="favlink" style="z-index:2; background:#97a7b4;"></div>
                            <div id="fav_expanded" class="favlink"  onclick="javascript:testfadeIn();" style="cursor:pointer;">
                                <a id="a_expanded" target="_blank">
                                    Show All
                                </a>
                            </div>
                        </div>
                        <h3 id="enterInfoLabel" style="position:absolute; right:-170px; bottom:-150; color:Red;overflow:visible;display:none;">&lt;&lt;&lt;<br />Enter product<br />information here.</h3>
                    </div>
                    <div id="createPostDiv" style="position:relative; display:none; height: 290px; width:100%; margin:0 auto; border:solid 2px #97a6b2; margin-top:10px;">
                        <h3 style="margin-left:10px;">TODO: CREATE A POST HERE</h3>
                        <div style="position:absolute; bottom:3px; right:25px;">
                            <p style="color:Red;cursor:pointer;" onclick="javascript:toggleCP();">Cancel</p>
                        </div>
                       
                    </div>
                    
                    <div id="nonFav_container" class="a">
                        <div class="a">
                        
                            <asp:UpdatePanel ID="results" UpdateMode="Conditional" runat="server" >
                                <ContentTemplate>
                                    
                                    <ul id="result_ul" style="margin:0;padding:0;list-style:none;width:100%;">
                                            <asp:SqlDataSource ID="posts" runat="server" ConnectionString="<%$ ConnectionStrings:FSEdepartmentsConnection %>">
                                                <SelectParameters>
                                                    <asp:Parameter Name="Type" Type="Int32" DefaultValue="1" />
                                                </SelectParameters>
                                            </asp:SqlDataSource>
                                            <asp:Repeater runat="server" OnItemCommand="addFavorites" DataSourceID="posts" ID="resultsRepeater">
                                                <ItemTemplate>
                                                    <li>
                                                        <div class="resultContainer_class">
                                                            <div class="result_class">
                                                                <div class="fav_picker"><img src="Images/dot.png"/></div>
                                                                <asp:LinkButton runat="server" CssClass="hiddenLinkButton"
                                                                             ID="addFavPostLinkButton"></asp:LinkButton>
                                                                <table class="t_con">
                                                                    <tr>
                                                                        <td class="rb_seller"><h3>ISBN</h3></td>
                                                                        <td class="rb_class"><h3>Author</h3></td>
                                                                        <td class="rb_title"><h3>Publisher</h3></td>
                                                                        <td class="rb_author"><h3>Title</h3></td>
                                                                        <td class="rb_isbn"><h3>Year Published</h3></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="rb_seller">
                                                                            <p><%#Eval("firstname") & " " & Eval("lastname")%></p></td>
                                                                        <td class="rb_class"><p>Accounting</p></td>
                                                                        <td class="rb_title"><p><%#Eval("Title")%></p></td>
                                                                        <td class="rb_author"><p><%#Eval("Author")%></p></td>
                                                                        <td class="rb_isbn"><p>123457899</p></td>
                                                                    </tr>
                                                                </table>
                                                            </div>
                                                            <div class="postDetail" style="margin:4px; margin-top:56px; color:white;padding:0;background:transparent;">
                                                            <p class="postDetailText">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                                                            Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                                                            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
                                                            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ItemTemplate>
                                            </asp:Repeater>
                                        </ul>
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="filterButton" />
                                        <asp:AsyncPostBackTrigger ControlID="clearButton" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </div>
                            
                        </div>
                        
                   <!-- <div class="dc" id="body_div" style="height:100%;width:100%;background:transparent;border:solid 1px gray;margin:0;">
                        
                    </div> -->
                </td>
            </tr>
        </table> 
    </div>
  
</asp:Content>
